<template>
  <div class="product-detail">
    <h2>{{ product.name }}</h2>
    <img :src="product.image" :alt="product.name">
    <p>价格: {{ product.price }}</p>
    <p>描述: {{ product.description }}</p>
    <button @click="addToCart(product)">加入购物车</button>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  data() {
    return {
      product: {}
    }
  },
  created() {
    // 模拟根据路由参数获取商品详情数据
    const id = this.$route.params.id
    this.product = {
      id: parseInt(id),
      name: '商品详情示例',
      price: 129.99,
      image: '@/assets/img.jpg',
      description: '这是一款非常不错的商品详情示例产品，具有多种特色功能。'
    }
  },
  methods: {
    addToCart(product) {
      // 这里可以实现将商品加入购物车的逻辑，比如更新购物车数据等
      this.$emit('add-to-cart', product)
    }
  }
}
</script>

<style scoped>
.product-detail {
  text-align: center;
  padding: 50px;
}

.product-detail img {
  max-width: 50%;
  height: auto;
}
</style>